<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.sql.*" %>
<%@ page import="com.data.ConnData" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/card.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style>
        /* 调整下拉菜单整体样式，使其位置更合理且美观 */
        .bu{
            margin-right: 150px;
            margin-bottom: 10px;
            float: right;
            background-color: #4CD263;
            width: 64px;
            height: 40px;
            border-radius: 5px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 120px; /* 缩小弹窗宽度 */
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 5px;
        }

        /* 下拉菜单选项按钮样式 */
        .dropdown-option {
            color: black;
            padding: 8px 12px; /* 调整按钮内边距使内容更紧凑 */
            text-decoration: none;
            display: block;
            text-align: left;
            border: none;
            background-color: #FFFFFF;
            width: 100%;
        }

        /* 鼠标悬停在选项按钮上的样式 */
        .dropdown-option:hover {
            background-color: #f1f1f1;
        }

    </style>
    <script>
        $(document).ready(function () {
            // 使用事件委托，绑定点击事件到所有具有id为imgButton的图片元素上
            $(document).on('click', '#imgButton', function (e) {
                e.preventDefault();

                // 获取当前点击图片所在的卡片元素（这里通过向上查找父元素div来确定卡片范围）
                var cardDiv = $(this).closest('div');

                // 创建一个下拉菜单元素，并将其添加到对应的卡片元素内，这样下拉菜单就会出现在对应卡片位置
                var dropdown = $('<div class="dropdown-menu"></div>').appendTo(cardDiv);

                // 创建三个选项按钮元素，并分别添加点击事件处理
                var modifyOption = $('<button class="dropdown-option">修改</button>');
                modifyOption.click(function () {
                    var noteId = cardDiv.find('input[name="note_id"]').val();
                    console.log(noteId)
                    window.location.href = "modify.jsp?note_id=" + noteId;
                });

                var deleteOption = $('<button class="dropdown-option">删除</button>');
                deleteOption.click(function () {
                    // 获取当前卡片中隐藏输入框里的note_id值
                    var noteId = cardDiv.find('input[name="note_id"]').val();
                    console.log(noteId)
                    window.location.href = "delete.jsp?note_id=" + noteId;
                });

                var createOption = $('<button class="dropdown-option">新建</button>');
                createOption.click(function () {
                    window.location.href = "create.jsp";
                });

                // 创建取消选项按钮元素，并添加点击事件处理，点击后隐藏下拉菜单
                var cancelOption = $('<button class="dropdown-option">取消</button>');
                cancelOption.click(function () {
                    dropdown.hide();
                });

                // 将四个选项按钮添加到下拉菜单中
                dropdown.append(modifyOption);
                dropdown.append(deleteOption);
                dropdown.append(createOption);
                dropdown.append(cancelOption);

                // 计算下拉菜单的显示位置，使其出现在图片的右侧
                var imgPosition = $(this).position();
                var imgWidth = $(this).width();
                dropdown.css({
                    'top': imgPosition.top + $(this).height() / 2,
                    'left': imgPosition.left + imgWidth
                });

                // 显示下拉菜单
                dropdown.show();
            });
        });
    </script>
</head>

<body>
<ul class="nav nav-pills" style="padding-top: 20px">
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link active" href="conversation.jsp">笔记</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="question.jsp">题目</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="rank.jsp">排行榜</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="me.jsp">我的</a>
    </li>
</ul>
<hr>
<div style="height:50px ">
    <div class="bu">
        <a href="create.jsp" style="color:white;text-align: center">创建</a>
    </div>
</div>
<%
    request.setCharacterEncoding("utf-8");

    ConnData objdata = new ConnData();
    Connection connection = null;
    PreparedStatement psmt = null;
    ResultSet resultSet = null;
    try {
        connection = objdata.getConn();
        String sql = "SELECT note_title,note_content,note_id FROM note_table WHere user_id=(SELECT ID FROM user_table WHERE nickname = ?)";
        psmt = objdata.getPsmt(sql);
        psmt.setString(1, (String) session.getAttribute("sess_user"));
        resultSet = psmt.executeQuery();
%>
<ul>
    <%
        while (resultSet.next()) {
            String title = resultSet.getString("note_title");
            String content = resultSet.getString("note_content");
            String noteId = resultSet.getString("note_id");
    %>

    <div style="width: 80%;
                margin: 0 auto;
                margin-bottom: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
                background-color: white;
                padding: 40px;">
        <input type="hidden" name="note_id" value="<%=noteId%>">
        <p><span style="color:#4CD263">#</span><%=title%><img src="../image/more.png" style="float: right;width: 3%"
                                                              id="imgButton"></p>
        <p><%=content%></p>

    </div>
    <%
        }
    %>
</ul>
<%
} catch (SQLException e) {
    e.printStackTrace();
%>
<p>数据库操作出现错误，请稍后再试！</p>
<%
    } finally {
        if (resultSet!= null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (psmt!= null) {
            try {
                psmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (connection!= null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
%>
</body>

</html>